<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--第一步： 引入 ECharts 文件 -->
        <script src="https://gitee.com/liukaigt/www/raw/master/echarts/js/echarts.min.js"></script>
        <!-- <script src="https://gitee.com/liukaigt/mydata/raw/master/midprice/jsondatas.js"></script> -->
        <script type="text/ecmascript" async>
            // 动态加载js
            function loadJS( url, callback ){
                var script = document.createElement('script'),
                fn = callback || function(){};
                // script.type = 'text/javascript';
                script.type = 'text/ecmascript';
        
                //IE
                if(script.readyState){
                    script.onreadystatechange = function(){
                        if( script.readyState == 'loaded' || script.readyState == 'complete' ){
                            script.onreadystatechange = null;
                            fn();
                        }
                    };
                }else{
                    //其他浏览器
                    script.onload = function(){
                        fn();
                    };
                }
                script.src = url;
                script.async = true;
                document.getElementsByTagName('head')[0].appendChild(script);
            }
        
        
            </script>
            <script type="text/ecmascript" >
            // 获取get参数
            function GetQueryString(name, defaultvalue)
            {
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return defaultvalue;
            }
        
            </script> 
        
    </head>
    <body>
          <!--第二步：指定一个容器用来存放echarts，也就是一个设置宽高属性的 DOM节点 -->
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id='chartsbox' style="width:95%;height:500px;margin-left:20px;"> </div>
    </body>
    <script type="text/javascript">
        /**
         * @todo 加载echarts方法
         * @url:异步请求路径
         * @chartId:请求的echart的id
         * @titleText:标题名
         * @detailHref:跳转路径
         * @name:图例名
        */
        function dayComment(url,chartId,titleText,detailHref, name1,name2) {
            /*$.ajax({//Ajax请求你要展现的数据
                url :url,
                type : 'post',
                cache : false,
                dataType : 'json',
                async:false,	//改为同步
                data : { },	//查看方式
                success : function(data) {
                    detailHref = 'http://www.baidu.com';
                    coinConsumeChart( chartId, titleText, detailHref, name, data.date, data.pv, data.fromTime, data.toTime);
                },
                error : function() {
                    alert('服务器异常！')
                }
            });*/
            //假设已经获取到json数据
            var data = getStaticJsonData();
            coinConsumeChart( chartId, titleText, detailHref, name1, name2, data.date, data.value1, data.value2, data.fromTime, data.toTime);
        }
        
        /**
         * @todo 可拖拽的折线图
         * @param chartId    插件的div的ID
         * @param titleText  标题名
         * @param detailUrl	 副标题超链接的路径
         * @param name	     图例名
         * @param xAxisData  X轴数据
         * @param seriesData Y轴数据
         * @param fromTime   默认开始节点
         * @param toTime	 默认结束节点
         * */
        function coinConsumeChart( chartId , titleText, detailUrl, name1, name2, xAxisData, seriesData,value2 , fromTime, toTime){
            // 指定图表的配置项和数据
            var myChart = echarts.init(document.getElementById( chartId ));

            var option = {
                    title : {
                        text: titleText,
                        x:'center',	//主标题居中
                        subtext:'回首页',
                        sublink: detailUrl,//副标题超链接
                        subtarget:'blank',//副标题超链接打开方式
                        subtextStyle:{
                            color:'#2299EE',
                            fontSize: 15,
                        }
                    },
                    // grid: {
                    //     left: '3%',
                    //     right: '4%',
                    //     bottom: '3%',
                    //     top: '10%',
                    //     containLabel: true
                    // },
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:[name1,name2], // 每条线的名称
                        top:30,
                        left:55,	//图示显示在左边
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            //mark : {show: true},
                            dataZoom : {show: true},
                            //magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            magicType : {show: true, type: ['line', 'bar']},
                            dataView : {show: true},
                            //restore : {show: true},
                            //saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    dataZoom : [{
                        show : true,
                        realtime : true,
                       // start : 20,
                       // end : 80 //百分比
                       startValue: fromTime, 	//拖拽条开始时间
                       endValue: toTime,			//拖拽条结束时间
                        // type:"inside"  // 通过滚轮缩放
                        // filterMode: 'filter',
                        /**
                        不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
                        默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
                        如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
                        */
                        // xAxisIndex: [0],

                    },
                    //下面这个属性是上面的折线图里面拖动和缩放
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,//默认为1
                        end: 100-1500/31,//默认为100
                    },
                    ],
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : xAxisData
                            // data : dates
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            // min: function(value) {return value.min;},   //y轴自动显示最小刻度为最小值
                            min: 0,   //y轴自动显示最小刻度为最小值
                            max: function(value) {return value.max;}   //y轴自动显示最大刻度为最大值

                        }
                    ],
                    series : [
                        {
                            itemStyle : { normal: {label : {show: true}}},   //重点是这句加上了后可以显示数字。不然不显示
                            name: name1,
                            type:'line',
                            data: seriesData,
                        },
                        {
                            itemStyle : { normal: {label : {show: true}}},   //重点是这句加上了后可以显示数字。不然不显示
                            name: name2,
                            type:'bar',
                            data:value2,
                        },

                    ]
                };
                                    
     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption( option );

            // window.onresize = () => {
            //     myChart.setOptions();
            //     myChart.myChart.resize();
            // }; 


        }
        
        //模拟AJax请求获取返回的json数据
        function getStaticJsonData(){
            // var data = '{"date":["20180726","20180727","20180728","20180729","20180730","20180731","20180801","20180802","20180803","20180804","20180805","20180806","20180807","20180808","20180809","20180810","20180811","20180812","20180813","20180814"],"pv":[100,10,20,30,60,800,700,300,1000,100,100,360,900,180,120,150,600,140,1200,800],"fromTime":"20180808","toTime":"20180814"}';
            // data = eval('(' + data + ')');
            data={
                "date": dates,
                "value1":value1,
                "value2":value2,
                "fromTime":'2023-01-03',
                "toTime":'2099-01-01',

            }
            return data;
        }
        
    </script>
<!-- <script type="text/javascript">
    autodivheight();

    function autodivheight(){ //函数：获取尺寸
        //获取浏览器窗口高度
        var winHeight=0;
        if (window.innerHeight){
            winHeight = window.innerHeight;
        }
        else if ((document.body) && (document.body.clientHeight)){
            winHeight = document.body.clientHeight;
        }

        //通过深入Document内部对body进行检测，获取浏览器窗口高度
        if (document.documentElement && document.documentElement.clientHeight){
            winHeight = document.documentElement.clientHeight;
        }
        //DIV高度为浏览器窗口的高度
        document.getElementById("chartsbox").style.height= winHeight +"px";
        //DIV高度为浏览器窗口高度的一半
        // document.getElementById("test").style.height= winHeight/2 +"px";
    }
    window.οnresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度
</script>
     -->
     <script type="text/javascript" defer> 

        //用法
        loadJS('https://gitee.com/liukaigt/mydata/raw/master/others/' + GetQueryString('js','default.js'),function(){

            // dayComment( 'Ajax请求路径', 'chartsbox', '可转债走势','http://liukaigt.gitee.io/web/', '中位数');	//执行
            dayComment( 'Ajax请求路径', 'chartsbox', titleText,detailHref, name1,name2);	//执行

    
        });
    
        // 重新更新数据
        // loadJS('https://gitee.com/liukaigt/mydata/raw/master/others/' + GetQueryString('js','datajson.js'),function(){
        //     // $('#jqGrid').jqGrid('clearGridData');
        //     $('#jqGrid').jqGrid('setGridParam', { colModel: datajson.cols,data: datajson.rows, }).trigger('reloadGrid');
        // });
    
    
        </script>
    
</html>
 
 